<template>
	<view class="bg-white w-100">
		<image class="cover w-100 rounded-0" :src="gnbInfo.activity_img_4" mode="scaleToFill"></image>
		<view class="px-2 py-4">
			<u--form labelPosition="top" labelWidth="100%" :labelStyle="labelStyle" :model="from" :rules="rules" ref="uForm">
				<view class="info_warp">
					<h2 class="tit font-md font-weight-bold py-2">参评对象</h2>
					<view class="mt-1"><rich-text class="rule c_6 lh_48 text" :nodes="gnbInfo.activity_rule"></rich-text></view>
					<!-- <ul class="c_6 lh_48">
						<li>1、具有独立的法人资格；</li>
						<li>2、无重大违法行为；</li>
						<li>3、公司近三年内对其主要产品（服务）的核心技术拥有自主知识产权（通过自主研发、受让、受赠、并购等方式或通过5年以上的独占许可方式）；</li>
						<li>
							4、公司再所处产业链上处于领先地位且再竞争领域具备非垄断特征，企业研发组织管理水平、科技成果转化能力、自主知识产权数量、销售与总资产成长性等指标再整个行业内领先；给第三方检测认证机构出具系统/产品证书
						</li>
						<li>5、质量管理体系相关证明；</li>
						<li>6、其他相关证明材料；</li>
						<li>7、安全生产、职业健康安全管理等证明文件。</li>
						<li>申报时间：2022年10月15日-11月30日</li>
					</ul> -->
				</view>
				<view>
					<h2 class="font-md font-weight-bold py-3">是否符合上述参评标准 *</h2>
					<u-form-item prop="is_standard">
						<radio-group @change="radioChange">
							<label class="d-block">
								<radio value="1" :checked="false" />
								<text class="ml-2">是</text>
							</label>
							<br />
							<label class="d-block mt-2">
								<radio value="0" :checked="false" />
								<text class="ml-2">否</text>
							</label>
						</radio-group>
					</u-form-item>
				</view>
				<view class="mt-1">
					<h2 class="tit font-md font-weight-bold py-2">参选/获奖福利</h2>
					<view class="mt-1"><rich-text class="rule c_6 lh_48 text" :nodes="gnbInfo.welfare"></rich-text></view>
					<!-- <ul class="c_6 lh_48">
						<li>参选企业：</li>
						<li>1、免费拥有索比光伏网传播机会；</li>
						<li>2、免费获得索比旗下各渠道进行“2022光能杯”公式宣传；</li>
						<li>3、免费加入索比光伏网企业名录页面优化；</li>
						<li>4、免费获得光伏文库下载机会（5篇）。</li>
						<li>获奖企业</li>
						<li>1、获奖“2022光能杯”奖杯；</li>
						<li>2、获得“2022光能杯”颁奖典礼出席名额1个；</li>
						<li>3、获得“2022光能杯”跨年分享会免费参与名额2个；</li>
						<li>4、获得“2022光能杯”获奖传播（专题榜单永久呈现）；</li>
						<li>5、为企业提供完整现场高清图；</li>
						<li>6、大型颁奖活动线上播出展示；</li>
						<li>7、获得“2022光能杯”同步海外传播展示；</li>
						<li>8、“2022光能杯”先上播出回放免费观看2个月（指定号码）。</li>
					</ul> -->
					<u-form-item label="公司名称 *" prop="company_name">
						<u--input v-model="from.company_name" border="surround" disabled="true" disabledColor="#fff"></u--input>
					</u-form-item>
					<u-form-item label="公司简称 *" prop="company_abbr"><u--input v-model="from.company_abbr" border="surround"></u--input></u-form-item>
					<u-form-item label="参评口号 *" prop="company_slogan"><u--input v-model="from.company_slogan" border="surround"></u--input></u-form-item>
					<u-form-item label="公司寄语 *" prop="company_sendword"><u--textarea v-model="from.company_sendword"></u--textarea></u-form-item>
				</view>
				<view class="trophy mt-1">
					<image class="my-1" :src="gnbInfo.activity_img_5" mode="aspectFit"></image>
					<view class="label c_6">每家企业可申报不超过3个奖项</view>
					<u-form-item prop="prize_ids">
						<u-checkbox-group v-model="from.prize_ids" placement="column" @change="checkboxChange">
							<u-checkbox
								:customStyle="{ marginBottom: '25rpx' }"
								v-for="(item, index) in cupList"
								:key="index"
								:label="item.prize_title"
								:name="item.prize_id"
							></u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<u-form-item label="营业执照副本扫描件" prop="certificate_img">
					<view>
						<text class="c_9 font-sm">支持jpg、png、gif、bmp、psd、tiff等图片格式</text>
						<view class="mt-2"><u-upload :fileList="licenseImg" @afterRead="afterphoto" @delete="deletephoto" :maxCount="1" :previewFullImage="true"></u-upload></view>
						<text class="c_6">备注：如您已经参加过往届光能杯评选且提交过相关文件，且2022年无需更新，本次无需提交</text>
					</view>
				</u-form-item>
				<u-form-item label="相关证书(扫描件)" prop="honor">
					<view>
						<text class="c_6 font-sm">专利证书或认证证书</text>
						<br />
						<text class="c_9 font-sm">支持jpg、png、gif、bmp、psd、tiff等图片格式</text>
						<view class="mt-2">
							<!-- <u-upload :fileList="from.honor" @afterRead="afterphoto" @delete="deletephoto" multiple :maxCount="100" :previewFullImage="true"></u-upload> -->
							<u-upload
								:fileList="from.honor"
								capture="['album', 'camera']"
								uploadIcon="plus"
								uploadIconColor="#fff"
								width="105"
								height="70"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="50"
								:max-size="600 * 1024"
								@oversize="oversize"
								:previewFullImage="true"
							></u-upload>
						</view>
						<text class="c_6">备注：如您已经参加过往届光能杯评选且提交过相关文件，且2022年无需更新，本次无需提交</text>
					</view>
				</u-form-item>
				<u-form-item label="姓名 *" prop="name">
					<u--input prefixIcon="account-fill" prefixIconStyle="font-size: 20px;color: #7DBAE7" v-model="from.name" border="surround"></u--input>
				</u-form-item>
				<u-form-item label="职位 *" prop="position">
					<u--input prefixIcon="bag-fill" prefixIconStyle="font-size: 20px;color: #7DBAE7" v-model="from.position" border="surround"></u--input>
				</u-form-item>
				<u-form-item label="手机 *" prop="phone">
					<u--input prefixIcon="phone-fill" prefixIconStyle="font-size: 20px;color: #7DBAE7" v-model="from.phone" border="surround"></u--input>
				</u-form-item>
				<u-form-item label="微信 *" prop="wechat">
					<u--input prefixIcon="weixin-fill" prefixIconStyle="font-size: 20px;color: #7DBAE7" v-model="from.wechat" border="surround"></u--input>
				</u-form-item>
				<u-form-item label="感谢参与,期待您对2023年度光能杯的祝福语,真诚感谢你的关注与期待! *" prop="leave_messages">
					<u--textarea v-model="from.leave_messages"></u--textarea>
				</u-form-item>
				<u-button type="primary" text="提交" style="background:#3B67A0;" class="mt-4" @click="submit"></u-button>
			</u--form>
		</view>
		<u-modal :show="modelShow" title="通知" @confirm="goPages('/pages/my/index')" confirmText="返回个人中心" confirmButtonShape="circle" confirmColor="#CF1526">
			<view class="slot-content text-center">
				<view class="font-md">您已成功提交报名申请，请等待审核</view>
				<view class="c_6 font_24 mt-2">您可以再“个人中心”中查看状态</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { baseUrl } from '@/util/api.js';
import { uploadImage } from '@/api/common.js';
import { voteUser, votePrizeList, voteSelection, voteParticipate } from '@/api/my/gnb_apply.js';
export default {
	data() {
		return {
			gnbInfo: {},
			from: {
				is_standard: '', //是否符合参评标准
				company_name: '', //公司名称
				company_abbr: '', //公司简称
				company_slogan: '', //参评口号
				company_sendword: '', //公司寄语
				prize_ids: [], //参评奖项
				certificate_img: '', //营业执照
				honor: [], //荣誉证书
				name: '', //姓名
				position: '', //职位
				phone: '', //手机号
				wechat: '', //微信
				leave_messages: '' //留言
			},
			licenseImg: [],
			cupList: [],
			labelStyle: {
				fontWeight: 700,
				fontSize: '35rpx'
			},
			rules: {
				is_standard: {
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				company_name: {
					type: 'string',
					required: true,
					message: '请输入企业名称',
					trigger: ['blur', 'change']
				},
				company_abbr: {
					type: 'string',
					required: true,
					message: '请输入公司简称',
					trigger: ['blur', 'change']
				},
				company_slogan: {
					type: 'string',
					required: true,
					message: '请输入参评口号',
					trigger: ['blur', 'change']
				},
				company_sendword: {
					type: 'string',
					required: true,
					message: '请输入公司寄语',
					trigger: ['blur', 'change']
				},
				prize_ids: {
					type: 'array',
					required: true,
					message: '请选择参评奖项',
					trigger: ['blur', 'change']
				},
				name: {
					type: 'string',
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				},
				position: {
					type: 'string',
					required: true,
					message: '请输入职位',
					trigger: ['blur', 'change']
				},
				phone: [
					{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						required: true,
						pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
						message: '请填写正确的手机号',
						trigger: ['blur', 'change']
					}
				],
				wechat: {
					type: 'string',
					required: true,
					message: '请输入微信',
					trigger: ['blur', 'change']
				},
				leave_messages: {
					type: 'string',
					required: true,
					message: '请输入留言',
					trigger: ['blur', 'change']
				}
			},
			activeId: '', //活动id
			modelShow: false
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(option) {
		this.activeId = option.activeId;
		this.info(option.activeId);
	},
	methods: {
		info(val) {
			// 获取投票信息
			voteParticipate({ uid: uni.getStorageSync('userInfo').userId }).then(res => {
				if (res.code == 0) {
					this.gnbInfo = res.data;
					console.log('===', this.gnbInfo);
				} else {
					uni.$u.toast(res.msg);
				}
			});
			// 活动奖项
			votePrizeList({ activity_id: val }).then(res => {
				this.cupList = res.data;
			});
			// 用户申请参评信息回显
			voteUser({ uid: uni.getStorageSync('userInfo').userId }).then(res => {
				if (res.code == 0) {
					this.from.company_name = res.data.company_name;
					this.from.certificate_img = res.data.certificate_img;
					this.licenseImg = [{ url: res.data.certificate_img }];
					this.from.honor = res.data.honor.map(item => ({ url: item }));
				} else {
					console.log(res.code);
				}
			});
		},
		radioChange(e) {
			// console.log('radio', e.detail.value);
			this.from.is_standard = e.detail.value;
		},
		// 奖项选择
		checkboxChange(e) {
			// console.log(e);
			if (e.length > 3) {
				uni.$u.toast('申报奖项不得超过三个~');
				return;
			}
			this.from.prize_ids = e;
		},
		// 上传营业执照
		async afterphoto(event) {
			// console.log(event);
			uploadImage(event).then(res => {
				if (res.code == 0) {
					uni.$u.toast(res.msg);
					this.licenseImg = [
						{
							url: res.img
						}
					];
					this.from.certificate_img = res.img;
				} else {
					uni.$u.toast('营业执照上传失败');
				}
			});
		},
		// 删除营业执照
		deletephoto(event) {
			this.licenseImg.splice(event.index, 1);
			this.from.certificate_img = '';
		},
		// 删除证书
		deletePic(event) {
			this.from.honor.splice(event.index, 1);
		},
		// 新增相关证书
		async afterRead(event) {
			let lists = [].concat(event.file);
			let fileListLen = this.from.honor.length;
			lists.map(item => {
				this.from.honor.push({
					// ...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i]);
				let item = this.from.honor[fileListLen];
				this.from.honor.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(e) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: baseUrl + '/model/common/layer_upload_img',
					filePath: e.url,
					name: 'file',
					// formData: e,
					success: res => {
						if (res.statusCode == 200) {
							let msg = JSON.parse(res.data);
							setTimeout(() => {
								resolve(msg.img);
							}, 1000);
						} else {
							uni.$u.toast('图片上传失败');
						}
					}
				});
			});
		},
		// 提交
		submit() {
			this.$refs.uForm
				.validate()
				.then(res => {
					let msg = {
						uid: uni.getStorageSync('userInfo').userId,
						activity_id: this.activeId,
						...this.from
					};
					voteSelection(msg).then(res => {
						console.log(res);
						uni.$u.toast(res.msg);
						if (res.code == 0) {
							this.modelShow = true;
						} else {
							uni.$u.toast(res.msg);
						}
					});
				})
				.catch(errors => {
					uni.$u.toast('请正确填写参评信息');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.cover {
	height: 840rpx;
}

.tit {
	border-bottom: 1px solid #d3d3d3;
}
.rule {
	line-height: 22rpx;
}
ul {
	padding: 0;
	font-size: 27rpx;
	li {
		list-style: none;
	}
}
.trophy {
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	image {
		width: 100%;
		height: 130rpx;
	}
	.label {
		font-size: 27rpx;
	}
}
</style>
